<template>
  <div>
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">

      <el-form-item label="字段" prop="title">
        <el-input v-model="form.title" placeholder="请输字段" size="small"/>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输名称" size="small"/>
      </el-form-item>
      <el-form-item label="类型" prop="status">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">input</el-radio>
          <el-radio :label="2">file</el-radio>
          <el-radio :label="3">textarea</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="值" v-if="form.type == 2">
        <div class="uploadcol" style="width: 100px;">
          <div class="uploadborder" @click="openUpload()" style="width: 100px;height: 100px;">
            <el-image style="width: 100px; height: 100px" :src="form.value" fit="contain"
                      v-if="form.value"></el-image>
            <i class=" fa fa-image" v-if="!form.value"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="值" prop="value" v-else-if="form.type == 3">
        <el-input v-model="form.value" placeholder="请输入值" size="small"/>
      </el-form-item>
      <el-form-item label="值" prop="value" v-else>
        <el-input v-model="form.value" placeholder="请输入值" size="small"/>
      </el-form-item>

      <el-form-item label="排序" prop="keywords">
        <el-input v-model="form.sort_order" placeholder="默认值100" size="small"/>
      </el-form-item>

      <el-form-item label=" ">
        <el-button @click="handleDialogVisible(false)" size="small">取 消</el-button>
        <el-button type="primary" @click="!form.id ? create() : update() " size="small">确 定
        </el-button>
      </el-form-item>

    </el-form>
    <select-files :show="uploadImage" @update="closeUpload" :selectType="1" @selectSure="selectImage"></select-files>
  </div>
</template>

<script>
import {createWebsite, updateWebsite} from '@/api/system/website';
import SelectFiles from '@/components/select-files'

export default {
  props: ['rowData', 'dialogStatus'],
  components: {
    SelectFiles
  },
  data() {
    return {
      form: {
        "id": '',
        "title": "",
        "type": 1,
        "value": "",
        "name": "",
        "sort_order": "",
      },
      rules: {
        name: [{
          required: true,
          message: "字段不能为空",
          trigger: "blur"
        }],
        title: [{
          required: true,
          message: "名称不能为空",
          trigger: "blur"
        }],
      },
      createLoading: false,
      updateLoading: false,
      uploadImage: false,
    }
  },
  created() {
    if (this.dialogStatus == 'update') {
      this.form = {...this.rowData}
    }
  },
  methods: {
    //父页面的回调事件
    handleDialogVisible(isUpdate) {
      this.dialogVisible = false
      this.$emit('childByDialogVisible', this.dialogVisible, isUpdate)
    },
    //创建
    create() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.createLoading = true
          createWebsite(this.form).then(response => {
            this.createLoading = false
            if (response.code == 200) {
              this.msgSuccess(response.msg);
              this.handleDialogVisible(true)
            }
          })
        }
      })
    },
    //修改
    update() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.updateLoading = true
          updateWebsite(this.form).then(response => {
            this.updateLoading = false
            if (response.code == 200) {
              this.msgSuccess(response.msg);
              this.handleDialogVisible(true)
            }
          })
        }
      })
    },
    openUpload() {
      this.uploadImage = true;
    },
    closeUpload() {
      this.uploadImage = false;
    },
    selectImage(res) {
      this.form.value = res[0].urls;
    },
  }
}
</script>
